<template>
	<view class="post-CurrentAccount">
		<view class="search">
			<view class="column">
				<picker mode="date" :fields="'month'" :value="filterBtnstartDate" :start="startDate" :end="endDate"
					@change="bindstartDate">
					<view class="uni-input">{{filterBtnstartDate}}</view>
				</picker>
				<text class="iconfont icon-xiangxia"></text>
			</view>
			<view class="Statistics">
				<text v-if="filterBtnType == 2 || filterBtnType == 4">支出：{{ monthPayPrice }}</text>
				<text v-if="filterBtnType == 1 || filterBtnType == 4">收入：{{ monthIncomePrice }}</text>
			</view>
			<view class="TransactionType" @click="TransactionTypeBtn">
				{{ TransactionType }} <text class="iconfont icon-xiala"></text>
			</view>
		</view>
		<view class="content">
			<view class="list" v-for="(item, infoIndex) in info" :key="infoIndex">
				<view class="strip" v-for="(val, indexn) in item.list" :key="indexn" @click="QueryDay(val.addTime)">
					<view class="left">
						<image src="https://h5.ylsp.vip/file/static/icons-26.png"></image>
					</view>
					<view class="right">
						<view class="name">
							{{ val.title }}
						</view>
						<view class="time">
							{{ val.addTime }}
						</view>
						<view class="amount" v-if="val.number >= 0">
							+{{ val.number }}
						</view>
						<view class="amount" v-else>
							{{ val.number }}
						</view>
					</view>
					<view class="iconfont icon-xiangyou"></view>
				</view>
			</view>
			<view class="record-bg" v-if="record">
				<image src="https://h5.ylsp.vip/file/static/record-bg.png" mode=""></image>
			</view>
			<Loading :loaded="loaded" :loading="loading"></Loading>
		</view>
		<view class="filter-view" :class="filter ? 'active' : 'hideBox'">
			<view class="title">
				选择交易类型
			</view>
			<view class="box-view">
				<view class="item" @click="SelectType(1)" :class="filterBtnType == 1?'active' :''">
					收入
				</view>
				<view class="item" @click="SelectType(2)" :class="filterBtnType == 2?'active':''">
					支出
				</view>
				<view class="item" @click="SelectType(3)" :class="filterBtnType == 3?'active':''">
					月管理奖
				</view>
				<view class="item" @click="SelectType(4)" :class="filterBtnType == 4?'active':''">
					全部
				</view>
			</view>
			<view class="footer">
				<view class="button" @click="hideModalView">取消</view>
			</view>
		</view>
		<view class="filter-view-bg" v-if="filter" @click="hideModalView">
		</view>
	</view>
</template>
<script>
	import {
		getCommissionInfo,
		getSpreadInfo,
		getCommissionInfo4month
	} from "@/api/user";
	import Loading from "@/components/Loading";
	const NAME = "CurrentAccount";
	export default {
		components: {
			Loading
		},
		props: {},
		data() {
			const currentDate = this.getDate({
				format: true
			})
			return {
				filter: false,
				filterBtnType: 1,
				monthIncomePrice: 0,
				monthPayPrice: 0,
				filterBtnstartDate: currentDate,
				info: [],
				TransactionType: '交易类型',
				commission: 0,
				where: {
					page: 1,
					limit: 10
				},
				types: 3,
				loadTitle: "",
				loaded: false,
				loading: false,
				record: false,
			}
		},
		computed: {
			startDate() {
				return this.getDate('start');
			},
			endDate() {
				return this.getDate('end');
			}
		},
		watch: {
			$yroute(n) {
				if (n.name === NAME) {
				}
			}
		},
		onLoad: function() {
			this.getCommission();
			this.getIndex();

		},
		onPullDownRefresh() {
			this.where.page = 1;
			this.loaded = false;
			this.loading = false;
			this.record = false;
			this.info = [];
			this.getIndex()
			uni.stopPullDownRefresh();
		},
		onReachBottom() {
			!this.loading && this.getIndex();
		},
		methods: {
			SelectType(type){
				let _type = type
				this.filterBtnType = type
				if(_type == 1){
					this.TransactionType = '收入'
				}else if(_type == 2){
					this.TransactionType = '支出'
				}else if(_type == 3){
					this.TransactionType = '月管理奖'
				}else{
					this.TransactionType = '全部'
				}
				this.filter = false
				this.info = [];
				this.where.page = 1;
				this.where.limit = 10;
				this.loaded = false;
				this.loading = false;
				this.record = false;
				this.getIndex();
			},
			TransactionTypeBtn(){
				this.filter = true
			},
			
			hideModalView(){
				this.filter = false
			},
			
			bindstartDate: function(e) {
				this.filterBtnstartDate = e.target.value
				this.info = [];
				this.where.page = 1;
				this.where.limit = 10;
				this.loaded = false;
				this.loading = false;
				this.record = false;
				this.getIndex();
			},
			getDate(type) {
				const date = new Date();
				let year = date.getFullYear();
				let month = date.getMonth() + 1;
				// let day = date.getDate();
				if (type === 'start') {
					year = year - 60;
				} else if (type === 'end') {
					year = year;
					month = month
				}
				month = month > 9 ? month : '0' + month;
				// day = day > 9 ? day : '0' + day;
				return `${year}-${month}`;
			},
			QueryDay(type) {
				let time = type;
				this.$yrouter.push({
					path: "/pages/user/CurrentAccount/day/index",
					query: {
						time,
						filterBtnType:this.filterBtnType
					},
				});
			},
			getIndex: function() {
				let that = this;
				if (that.loading) return; //阻止下次请求（false可以进行请求）；
				if (that.loaded) return; //阻止结束当前请求（false可以进行请求）；
				that.loading = true;
				getCommissionInfo4month(that.where, that.types, that.filterBtnstartDate, that.filterBtnType).then(
					res => {
						that.loading = false;
						let listLenth = 0;
						if (res.data.monthList[0] == null) {
							that.record = true
						}else if (res.data.monthList[0].list == null) {
							that.record = true
						} else {
							listLenth =res.data.monthList[0].list.length;
							that.info.push.apply(that.info, res.data.monthList);
							that.record = false
						}
						that.loaded = listLenth < that.where.limit;
						that.loadTitle = that.loaded ? "人家是有底线的" : "上拉加载更多";
						that.where.page = that.where.page + 1;
						that.monthIncomePrice =res.data.monthIncomePrice;
						that.monthPayPrice =res.data.monthPayPrice;
					},
					err => {
						uni.showToast({
							title: err.msg || err.response.data.msg || err.response.data.message,
							icon: 'none',
							duration: 2000
						});
					}
				);
			},
			getCommission: function() {
				let that = this;
				getSpreadInfo().then(
					res => {
						that.commission = res.data.commissionCount;
					},
					err => {
						uni.showToast({
							title: err.msg || err.response.data.msg || err.response.data.message,
							icon: 'none',
							duration: 2000
						});
					}
				);
			}
		}
	}
</script>
<style lang="less">
	::-webkit-scrollbar {
		width: 0;
		height: 0;
		background-color: transparent;
	}
	page{
		background: #FFFFFF;
	}

	.post-CurrentAccount {
		width: 100%;
	}

	.post-CurrentAccount .search {
		background-color: #f9f9f9;
		height: 130rpx;
		width: 100%;
		position: fixed;
		top: 0;
		left: 0;
		z-index: 12;
		box-sizing: border-box;
		padding-left: 60rpx;
		
		.TransactionType{
			position: absolute;
			top: 30rpx;
			right: 70rpx;
			
			text{
				margin-left: 10rpx;
				
			}
		}

		.RefreshBtn {
			position: absolute;
			right: 40rpx;
			top: 25rpx;

			image {
				width: 50rpx;
				height: 50rpx;
			}
		}

		.Statistics {
			width: 100%;
			color: #999999;
			font-size: 30rpx;
			float: left;
			margin-top: 10rpx;
			text{
				margin-right: 20rpx;
			}
		}
	}

	.post-CurrentAccount .content {
		overflow-y: auto;
		padding: 130rpx 20rpx 0 20rpx;
		box-sizing: border-box;
		width: 100%;
		background-color: #FFFFFF;
		
		.record-bg {
			width: 400rpx;
			height: 400rpx;
			margin: 0 auto;
			margin-top: 100rpx;
		}
		
		.record-bg image {
			width: 100%;
			height: 100%;
		}

		.list {
			width: 100%;
			height: 100%;
			overflow-y: auto;

			

			.strip {
				width: 100%;
				height: 160rpx;
				position: relative;

				.left {
					height: 100%;
					width: 120rpx;
					float: left;
					text-align: center;

					image {
						width: 80rpx;
						height: 80rpx;
						margin-top: 40rpx;
					}
				}

				.right {
					height: 100%;
					width: calc(100% - 120rpx);
					float: left;
					box-sizing: border-box;
					padding-top: 30rpx;
					border-bottom: #e8e8e8 solid 1rpx;
					position: relative;

					.name {
						font-size: 36rpx;
						color: #555555;
					}

					.time {
						font-size: 28rpx;
						padding-top: 10rpx;
						color: #999999;
					}

					.amount {
						height: 100%;
						width: 200rpx;
						position: absolute;
						top: 0;
						right: 30rpx;
						text-align: center;
						line-height: 160rpx;
						font-size: 40rpx;
						color: #333333;
					}
				}

				.iconfont {
					position: absolute;
					display: inline-block;
					right: 0;
					top: 60rpx;
				}
			}
		}
	}

	.post-CurrentAccount .search .column {
		width: 60%;
		float: left;
		box-sizing: border-box;
		padding: 15rpx 15rpx 0 0;
		color: #222222;
		font-size: 38rpx;
	}

	.post-CurrentAccount .search .column picker {
		display: inline-block;
	}

	.post-CurrentAccount .search .column text {
		font-size: 28rpx;
		font-weight: bold;
		margin-left: 20rpx;
	}

	.post-CurrentAccount .search .column .btn {
		padding: 15rpx 20rpx;
		border-radius: 50rpx;
		text-align: center;
		color: #ffffff;
		background-color: #fc5531;
		font-size: 30rpx;

		.icon {
			display: inline-block;
			font-size: 22rpx;
			margin-left: 10rpx;
		}
	}



	.filter-view-bg {
		background-color: rgba(0, 0, 0, 0.6);
		z-index: 13;
		height: 100%;
		width: 100%;
		position: fixed;
		top: 0;
		left: 0;
	}

	.filter-view {
		position: fixed;
		bottom: 0;
		left: 0;
		height: 430rpx;
		width: 100%;
		box-sizing: border-box;
		background-color: #FFFFFF;
		z-index: 14;
		overflow: hidden;
		border-top-left-radius: 30rpx;
		border-top-right-radius: 30rpx;
		.title {
			width: 100%;
			color: #555555;
			font-size: 36rpx;
			height: 120rpx;
			line-height: 120rpx;
			text-align: center;
		}
		
		.box-view{
			height: 150rpx;
			width: 100%;
			padding: 0 30rpx;
			box-sizing: border-box;
			margin-top: 30rpx;
			.item{
				height: 70rpx;
				width: auto;
				line-height: 70rpx;
				float: left;
				padding: 0 40rpx;
				border-radius: 6rpx;
				border: #e8e8e8 solid 1rpx;
				font-size: 28rpx;
				color: #555555;
				margin-right: 20rpx;
			}
			
			.item.active{
				background-color: #ff3334;
				color: #FFFFFF;
			}
		}
		
		.footer{
			height: 100rpx;
			box-sizing: border-box;
			width: 100%;
			border-top: #e8e8e8 solid 20rpx;
			.button{
				width: 100%;
				background-color: #FFFFFF;
				color: #555555;
				height: 100%;
				left: 100rpx;
				line-height: 100rpx;
				text-align: center;
			}
		}

	}

	.filter-view.hideBox {
		transform: translate3d(0rpx, 430rpx, 0rpx);
		transition-duration: 0.5s;
	}

	.filter-view.active {
		transform: translate3d(0rpx, 0rpx, 0rpx);
		transition-duration: 0.5s;
	}
</style>
